<template>
  <Row class="layout-content-body">
    <dtable 
      :columns="columns" 
      :data-all="dataAll" 
      :data-show="dataShow" 
      :totals="total" 
      :loading="loading" 
      add 
      del-check 
      op 
      @refresh="getall()" 
      @add="add" 
      @del="del" 
      @edit="edit" 
      @delCheck="delCheck" 
      @changePage="changePage"
    />
    <Modal 
      v-model="editData" 
      title="直播频道信息" 
      width="600" 
      :mask-closable="false" 
      class="editm" 
      @on-ok="asyncOK" 
      @on-cancel="asyncCancel"
    >
      <Form 
        ref="editForm" 
        :model="formItem" 
        :label-width="80" 
        :rules="ruleValidate"
      >
        <Form-item 
          label="频道标题" 
          prop="Title"
        >
          <Input 
            v-model="formItem.Title" 
            placeholder="请输入" 
            @on-enter="asyncOK()"
          ></Input>
        </Form-item>
        <Form-item 
          label="虚拟域名" 
          prop="Vhost"
        >
          <Input 
            v-model="formItem.Vhost" 
            placeholder="请输入"
          ></Input>
        </Form-item>
        <Form-item 
          label="频道标识" 
          prop="Stream"
        >
          <Input 
            v-model="formItem.Stream" 
            placeholder="请输入"
          ></Input>
        </Form-item>
        <Form-item 
          label="是否录制" 
          prop="Type"
        >
          <Radio-group v-model.number="formItem.Type">
            <Radio label="0">不录制</Radio>
            <Radio label="1">录制</Radio>
          </Radio-group>
        </Form-item>
        <Form-item 
          label="状态" 
          prop="Status"
        >
          <Radio-group v-model.number="formItem.Status">
            <Radio label="1">启用</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item 
          label="发布范围" 
          prop="Scope"
        >
          <Radio-group v-model.number="formItem.Scope">
            <Radio 
              v-if="getScope" 
              label="2"
            >全系统</Radio>
            <Radio label="1">全单位</Radio>
            <Radio label="0">本部门</Radio>
            <Radio label="3">指定用户</Radio>
          </Radio-group>
        </Form-item>
        <Form-item v-if="formItem.Scope==='3' || formItem.Scope===3">
          <Transfer 
            :titles="['未授权', '已授权']" 
            :data="TransData" 
            :target-keys="targetKeys" 
            :render-format="render" 
            @on-change="handleChange"
          />
        </Form-item>
        <Form-item 
          label="说明" 
          prop="Remark"
        >
          <Input 
            v-model="formItem.Remark" 
            type="textarea" 
            :autosize="{minRows: 2,maxRows: 5}" 
            placeholder="请输入..."
          >
        </Input>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>

<script>
// import api from '../../api'
// import {mapMutations, mapGetters, mapState} from 'vuex'
import { timeFormat } from '@/common/filter';
import dtable from '@/components/table/btable.vue'; // 采用biztable
import moment from 'moment';
export default {
  components: {
    dtable
  },
  data () {
    return {
      loading: false, // 数据刷新遮罩层
      columns: [
        {
          title: '名称',
          key: 'Title',
          sortable: true
        },
        {
          title: '访问地址',
          key: 'Url',
          sortable: true
        },
        {
          title: '所属单位',
          key: 'OrgName',
          sortable: true
        },
        {
          title: '是否录制',
          key: 'Type',
          sortable: true,
          render (row, column, index) {
            return `${row.Type === 0 ? '不录制' : '录制'}`;
          }
        },
        {
          title: '范围',
          key: 'Sname',
          width: 80,
          sortable: true
        },
        {
          title: '创建者',
          key: 'Creater',
          sortable: true
        },
        {
          title: '发布时间',
          key: 'Ctime',
          sortable: true,
          render: (h, params) => {
            return h('div', [h('strong', timeFormat(params.row.Ctime))]);
          }
        },
        {
          title: '最后修改者',
          key: 'Updater',
          sortable: true
        },
        {
          title: '最后修改时间',
          key: 'Utime',
          sortable: true,
          render: (h, params) => {
            return h('div', [h('strong', timeFormat(params.row.Ctime))]);
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 80,
          sortable: true,
          render (row, column, index) {
            return `${row.status === 0 ? '失效' : '有效'}`;
          }
        }
      ], // 表格样式
      dataAll: [], // 表格数据来源
      dataShow: true, // 是否显示表格数据查看表单
      editData: false, // 显示编辑表单
      formItem: {
        Title: '',
        Stream: '',
        Scope: 0,
        Type: 0,
        Vhost: 'live',
        Url: '',
        OrgName: '',
        Status: 1,
        Remark: '',
        users: this.targetKeys
      }, // 数据编辑表单
      ruleValidate: {
        Title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        Stream: [
          {
            required: true,
            message: '标识不能为空',
            trigger: 'blur'
          }
        ],
        Vhost: [
          {
            required: true,
            message: '虚拟域名不能为空',
            trigger: 'blur'
          }
        ]
      }, // 数据编辑表单验证规则
      addid: true, // true为修改模式，false为添加模式
      //        role: [],
      org: [],
      total: 0,
      optionsDate: {
        shortcuts: [
          {
            text: '最近一周',
            value () {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: '最近一个月',
            value () {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: '最近三个月',
            value () {
              const end = new Date();
              const start = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          }
        ]
      },
      TransData: [],
      targetKeys: []
    };
  },
  computed: {
    state () {
      return this.$store.state.app;
    },
    getRtime () {
      let rtime = [];
      rtime.push(this.formItem.Btime, this.formItem.Etime);
      return rtime;
    },
    getScope () {
      if (this.state.role.Type > 0) {
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {},
  mounted () {
    let self = this;
    self.getall();
    self.getUser();
  },
  methods: {
    // 富文本框内容对应
    updateData (data) {
      // sync content to component
      this.formItem.Content = data;
    },
    //     获取资源名称
    getNameById (value) {
      let rname = '';
      if (value || '') {
        let rv = this.dataAll.filter((col, index) => col.Id === value);
        rname = rv[0].Name;
      }
      return rname;
    },
    //      改变页码
    changePage (pagedata) {
      this.spinShow = true;
      this.$api.getBulletin(pagedata).then(res => {
        if (!res.error) {
          this.total = res.Data.total;
          this.dataAll = res.Data.tabledata;
        } else {
          this.$Message.error(res.message);
        }
      });
      setTimeout(() => {
        this.spinShow = false;
      }, 500);
    },
    getall () {
      let pagedata = {
        pagesize: 10,
        page: 1
      };
      this.loading = true;
      this.$api.getLiveChannel(pagedata).then(
        res => {
          if (!res.error) {
            this.total = res.Data.total;
            this.dataAll = res.Data.tabledata;
          } else {
            this.$Message.error(res.message);
          }
        },
        err => {
          this.$Message.error(err, 4);
        }
      );
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
    getUser () {
      this.$api.GetAllOrgUsers().then(
        res => {
          if (!res.error) {
            this.TransData = res.Data;
          } else {
            this.$Message.error(res.message);
          }
        },
        err => {
          this.$Message.error(err, 4);
        }
      );
    },
    getLiveUser (index) {
      this.$api.GetLiveUserByLive(index).then(res => {
        if (!res.error && res.Data) {
          this.targetKeys = res.Data;
        } else {
          this.targetKeys = [];
        }
      });
    },
    edit (index) {
      console.log(index);
      this.getLiveUser(index.Id);
      this.addid = true;
      this.formItem = index;
      //        this.formItem.Rtime = this.getRtime
      this.editData = true;
    },
    add () {
      this.targetKeys = [];
      this.addid = false;
      this.$refs['editForm'].resetFields();
      this.formItem.Rtime = this.getRtime;
      this.editData = true;
    },
    asyncOK () {
      this.formItem.users = this.targetKeys;
      console.log(this.formItem);
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          if (this.addid) {
            this.$api.updateLiveChannel(this.formItem).then(
              res => {
                if (!res.error) {
                  this.getall();
                  this.$Message.success(res.message);
                } else {
                  this.$Message.error(res.message, 4);
                }
              },
              err => {
                this.$Message.error(err, 4);
              }
            );
          } else if (!this.addid) {
            this.$api.addLiveChannel(this.formItem).then(
              res => {
                if (!res.error) {
                  this.getall();
                  this.$Message.success(res.message);
                } else {
                  this.$Message.error(res.message, 4);
                }
              },
              err => {
                this.$Message.error(err, 4);
              }
            );
          }
          setTimeout(() => {
            this.editData = false;
          }, 1000);
        } else {
          this.$Message.error('表单验证失败!');
        }
      });
      this.editData = false;
      this.$refs['editForm'].resetFields();
    },
    asyncCancel () {
      this.getall();
      this.$refs['editForm'].resetFields();
    },
    del (row) {
      this.$api.deleteLiveChannel(row).then(
        res => {
          if (!res.error) {
            this.getall();
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message, 4);
          }
        },
        err => {
          this.$Message.error(err, 4);
        }
      );
    },
    delCheck (row) {
      this.$api.deleteLiveChannels(row).then(
        res => {
          if (!res.error) {
            this.getall();
            this.$Message.success(res.message);
          } else {
            this.$Message.error(res.message, 4);
          }
        },
        err => {
          this.$Message.error(err, 4);
        }
      );
    },
    render (item) {
      return item.label;
    },
    handleChange (newTargetKeys, direction, moveKeys) {
      console.log(newTargetKeys);
      console.log(direction);
      console.log(moveKeys);
      this.targetKeys = newTargetKeys;
    }
  }
};
</script>
